<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
	content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>购物车</title>
<!--引入jquery-->
<script type="text/javascript" src="../gouwu/js/jquery.min.js"></script>
<script type="text/javascript" src="../gouwu/js/carts.js"></script>
<link rel="stylesheet" href="../gouwu/css/reset.css">
<link rel="stylesheet" href="../gouwu/css/carts.css">
</head>
<script type="text/javascript">
	// 使用jquery进行ajax处理
	$(function()  {
		// 使用jquery进行ajax请求处理
		$.ajax({
			type : "POST", // 请求类型
			url : "../Queryshopppingrecord", // 请求的url
			data : $("#form1").serialize(), // 发送的数据 使用serialize方法替代手动拼写数据串
			dataType : "json", // 响应发挥的数据类型  
			success : function(data, textStatus, jqXHR) { // 执行成功之后的回调函数
				// 回调函数的dom操作
				// 解析json数据
				console.info(data);
				/*
				 注意，如果返回数据为文本类型，需要将json字符串转为json对象
				each函数解析的是json对象，而不是json字符串
				 */
				// 解析拼写的html内容
				var strHtml = "";
				$.each(data, function(index, eachVal) {
					strHtml += "<tr>";
					strHtml += "<th scope='row'>";
					strHtml += (index + 1);
					strHtml += "</th>";
					strHtml += "<td>";
					strHtml += eachVal.phonename;
					strHtml += "</td>";
					strHtml += "<td>";
					strHtml += eachVal.pintroduce;
					strHtml += "</td>";
					strHtml += "<td>";
					strHtml += eachVal.phoneprice;
					strHtml += "</td>";
					strHtml += "</tr>";
				});
				// 把解析的html内容，使用dom操作赋值到表格中
				$("#displaytbody").html(strHtml);
			},
			error : function(data) {
				alert("请求失败" + data);
			}
		});
	});
</script>
<body>
	<form id="form1" class="form-horizontal" action="" method="post">
		<section class="cartMain">
			<div class="cartMain_hd">
				<ul class="order_lists cartTop">
					<li class="list_con"></li>
					<li class="list_info">参数</li>
					<li class="list_price">单价</li>
					<li class="list_amount">数量</li>
					<li class="list_sum">金额</li>
					<li class="list_op">操作</li>
				</ul>
			</div>
			<div class="cartBox">
				<div id="myfugai" class="order_content">
					<ul class="order_lists">
						<li class="list_chk"><input type="checkbox" id="checkbox_2"
							class="son_check"> <label for="checkbox_2"></label></li>
						<li class="list_con">
							<div class="list_text">
								<a id="nam">联想Z5 4GB+64GB 星夜黑</a>
							</div>
						</li>
						<li class="list_info"><a id="pin">4GB+64GB星夜黑</a></li>
						<li class="list_price">
							<p id="pri" class="price">￥1299</p>
						</li>
						<li class="list_amount">
							<div class="amount_box">
								<a href="javascript:;" class="reduce reSty">-</a> <input
									type="text" value="1" class="sum"> <a
									href="javascript:;" class="plus">+</a>
							</div>
						</li>
						<li class="list_sum">
							<p class="sum_price">￥1299</p>
						</li>
						<li class="list_op">
							<p class="del">
								<a href="javascript:" class="delBtn">移除商品</a>
							</p>
						</li>
					</ul>
				</div>
			</div>
			<div class="cartBox">
				<div id="myfugai" class="order_content">
					<ul class="order_lists">
						<li class="list_chk"><input type="checkbox" id="checkbox_3"
							class="son_check"> <label for="checkbox_3"></label></li>
						<li class="list_con">
							<div class="list_text">
								<a id="nam">联想S5 3GB+32GB 烈焰红</a>
							</div>
						</li>
						<li class="list_info"><a id="pin">4GB+64GB星夜黑</a></li>
						<li class="list_price">
							<p id="pri" class="price">￥1199</p>
						</li>
						<li class="list_amount">
							<div class="amount_box">
								<a href="javascript:;" class="reduce reSty">-</a> <input
									type="text" value="1" class="sum"> <a
									href="javascript:;" class="plus">+</a>
							</div>
						</li>
						<li class="list_sum">
							<p class="sum_price">￥1199</p>
						</li>
						<li class="list_op">
							<p class="del">
								<a href="javascript:;" class="delBtn">移除商品</a>
							</p>
						</li>
					</ul>
				</div>
			</div>
			
			<!--底部-->
			<div class="bar-wrapper">
				<div class="bar-right">
					<div class="piece">
						已选商品<strong class="piece_num">0</strong>件
					</div>
					<div class="totalMoney">
						共计: <strong class="total_text">0.00</strong>
					</div>
					<div class="calBtn">
						<a href="../alipay/index_alipay.jsp?sumprice=$('.total_text').text&phoneid=31">结算</a>
						<!--<a href="../alipay/alipay.trade.page.pay.jsp" target="_blank" >结算</a>-->
					</div>
				</div>
			</div>
		</section>
	</form>
	<section class="model_bg"></section>
	<section class="my_model">
		<p class="title">
			删除手机<span class="closeModel">X</span>
		</p>
		<p>您确认要删除该手机吗？</p>
		<div class="opBtn">
			<a href="javascript:;" class="dialog-sure">确定</a> <a
				href="javascript:;" class="dialog-close">关闭</a>
		</div>
	</section>
	
</body>
</html>